<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论</title>
</head>
<body>
<div id="comment">
    <div>
        <form>
            <input type="text" id="context" maxlength="200" size="100" placeholder="不得超过200个汉字"></input>
            <input type="button" value="新建评论" onclick="comment_click()"></input>
        </form>
    </div>
    <br>
    <table border="1" cellspacing="0">
       <thead>
       <tr align="center" height="40">
           <th width="1200">评论内容</th>
           <th width="200">评论人</th>
           <th width="100">时间</th>
       </tr>
       </thead>
        <tr v-for="comment in comments" aligen="center" height="40">
            <td>{{comment.context}}</td>
            <td>{{comment.username}}</td>
            <td>{{comment.date}}</td>
        </tr>
    </table>
    <div align="center">
        <input type="button" value="上一页" onclick="up_click()"></input>
        <input type="button" value="下一页" onclick="down_click()"></input>
    </div>
</div>
</body>
</html>
<script src="../js/ajax.js"></script>
<script src="../js/vue.js"></script>
<script>
    window.onload=function getdata(){
        let blog_id=window.localStorage.getItem("blogId");
        let currentPage=window.localStorage.getItem("page");
        new Vue({
            el:"#comment",
            data(){
                return{
                    comments:[]
                }
            },
            mounted(){
                let _this=this;
                ajax({
                    method: "post",
                    url: "../../comment",
                    data: {
                        currentPage:currentPage,
                        blogId:blog_id,
                        code:0
                    },
                    success: function (result) {
                        console.log(result);
                        _this.comments=result;
                    },
                    error:function (result){
                        console.log(result);
                    }
                })
            }
        })
    }

    function comment_click(){
        let context = document.getElementById("context").value;
        let user_name=window.localStorage.getItem("loginName");
        let blog_id=window.localStorage.getItem("blogId");
        ajax({
            method: "post",
            url: "../../comment",
            data: {
                context:context,
                userName:user_name,
                blogId:blog_id,
                code:3
            },
            success: function (result) {
                alert("上传成功");
                console.log(result);
            },
            error:function (result){
                console.log(result);
            }
        })
        window.location.reload();
    }
    function up_click(){
        let currentPage=window.localStorage.getItem("page");
        currentPage=currentPage-1;
        window.localStorage.setItem("page",currentPage.toString());
        window.location.href="./user_comment.html";
    }

    function down_click(){
        let currentPage=window.localStorage.getItem("page");
        currentPage=parseInt(currentPage)+1;
        window.localStorage.setItem("page",currentPage.toString());
        window.location.href="./user_comment.html";
    }
</script>